<template>
  <view class="container">
    <view class="article-list">
      <view 
        class="article-item" 
        v-for="(article, index) in articles" 
        :key="index"
        @click="viewArticle(article.id)"
      >
        <view class="article-header">
          <text class="title">{{ article.title }}</text>
        </view>
        <view class="article-content">
          <text>{{ article.summary }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      articles: [
        { id: 1, title: '文章标题1', summary: '文章摘要1' },
        { id: 2, title: '文章标题2', summary: '文章摘要2' },
        { id: 3, title: '文章标题3', summary: '文章摘要3' }
      ]
    };
  },
  methods: {
    viewArticle(id) {
      // 跳转到文章详细页面，这里使用id作为示例
      uni.navigateTo({
        url: `/pages/article-detail/article-detail?id=${id}`
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 10px;
  background-color: #f8f8f8;
}
.article-list {
  display: flex;
  flex-direction: column;
}
.article-item {
  padding: 10px;
  margin-bottom: 10px;
  background-color: #ffffff;
  border-radius: 5px;
}
.article-header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}
.article-content {
  font-size: 14px;
  color: #666666;
}
</style>